<template>
  <div>

    <el-card>
      <div class="isheader-txt">我们根据网友们的日常提问整理出数据，您可以根据您的渊博学识为其解答困惑！</div>
      <el-table :data="dataList" style="width: 100%" stripe border="">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column prop="title" label="问题名称">
        </el-table-column>
        <el-table-column label="照片" type="image">
          <template>
            <img class="table-img"
              src="https://img2.baidu.com/it/u=1057334488,1853748013&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1671037200&t=80f638a1d548c64c9f3f186910235728"
              alt="">
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="提问时间">
        </el-table-column>
        <el-table-column prop="address" label="区域">
        </el-table-column>
        <el-table-column prop="remarks" label="备注信息">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" @click="answer(row)" size="small">为他解答</el-button>
            <el-button type="success" size="small" @click="other(row)">查看其他解答</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="解答框" :visible.sync="dialogVisible" width="40%">
      <el-form :model="answerFrom" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="我的解答：" prop="content">
          <el-input type="textarea" v-model="answerFrom.content"></el-input>
        </el-form-item>
        <el-form-item label="上传照片：">
          <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmTheAnswer">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 解答完毕对话框 -->
    <el-dialog title="网友和专家的回答" :visible.sync="okVisible" width="50%">
     <div class="isLog">
      <div v-for="(item,index) in theAnswerIsComplete" :key="index" class="log-box">
       <div class="log-textbox">
        <div class="log-title"> {{index + 1}}: 网友来自 ： {{item.create_time}}的回答</div>
        <div>回复内容： <span class="log-txt">{{item.content}}</span></div>
       </div>
       <img class="logImg" src="https://img0.baidu.com/it/u=1467040998,2712052473&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1671210000&t=41bc5f042de0d138d9b74e4a3c35c9a4" alt="">
   <hr class="isbr">
      </div>
     </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="okVisible = false">取 消</el-button>
        <el-button type="primary" @click="okVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import $http from '@/main.js'
export default {
  data () {
    return {
      // 假数据，后期删除
      imageUrl: '',
      dataList: [],
      // 解答完毕
      theAnswerIsComplete: [],
      dialogVisible: false,
      okVisible: false,
      // 解答数据
      answerFrom: {
        question_id: null,
        // answer_id: null,
        content: '',
        image: ''
      },
      rules: {
        content: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }

    }
  },
  methods: {
    async getdata () {
      const { data: res } = await $http.post('index/diagnose/getQuestions', { state: 5 })
      this.dataList = res.data
      console.log(this.dataList)
    },
    // 解答对话框
    answer (row) {
      this.answerFrom.question_id = row.id
      this.dialogVisible = true
    },
    // 确定回答
    async confirmTheAnswer () {
      const { data: res } = await $http.post('index/diagnose/answer', this.answerFrom)
      console.log(res)
      this.$message.success('解答成功！')
      this.dialogVisible = false
    },
    // 查看解答对话框
    async other (row) {
      console.log(row.id)
      const { data: res } = await $http.post('index/diagnose/getQuestion', { question_id: row.id })
      this.theAnswerIsComplete = res.data.answer
      console.log(this.theAnswerIsComplete)
      this.okVisible = true
    },
    // 假数据上传
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  },
  created () {
    this.getdata()
  }
}
</script>

<style lang="less" scoped>
.table-img {
  width: 40px;
  height: 40px;
}

.isheader-txt {
  text-align: center;
  margin-bottom: 2vh;
}

// 假数据，后期删除
.avatar-uploader-icon {
  border: 1px dashed #333;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #333;
  width: 108px;
  height: 108px;
  line-height: 108px;
  text-align: center;
}

.avatar {
  width: 108px;
  height: 108px;
  display: block;
}
.logImg{
  width: 200px;
}
.log-box{
display: flex;
justify-content: space-evenly;
margin-bottom: 20px;
}
.isLog{
  max-height: 50vh;
  overflow: scroll;
}
.log-title{
  font-size: 22px;
    color: #003388;
    padding: 12px 0px;
}
.log-txt{
  color: #883300;
  font-size: 18px;
  padding: 12px 0px;
}
.isbr{
  margin: 20px 0;
}
.log-textbox{
  width: 60%;
}
</style>
